<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html>
<html lang="zh_cn">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>JIM管理系统</title>
<%@ include file="../../../inc/main-css.jsp"%>
<%@ include file="../../../inc/main-js.jsp"%>
<style type="text/css">
	.table th, .table td { 
	text-align: center;
	vertical-align: middle!important;
	}
</style>
<script type="text/javascript">
	$(function(){
		$('#table').bootstrapTable({
			url:'list',
			showColumns:true,
			pagination:true,
			sidePagination:'server',
			pageList:[10, 25, 50, 100],
		    columns: [
		    {
		        field: 'id',
		        title: 'id',
		    }, {
		        field: 'rolename',
		        title: '角色名称'
		    }, {
		        field: 'roleno',
		        title: '角色代码'
		    }, {
		       
		        title: '操作',
		        formatter:function(value,row,index){
		        	
		        	return '<div class="btn-group" role="group">'
							  +'<button type="button" class="btn btn-default" onclick="edit('+row.id+');">编辑</button>'
							  +'<button type="button" class="btn btn-default" onclick="deleteRec('+row.id+');">删除</button>'
							+'</div>';
		        }
		    }]
		});
		
		var setting = {
	            check: {
	                enable: true
	            }
	        };
		
		var zNodes;
		
		add = function(){
			$("#roleModal").modal("show");
			$('#roleForm')[0].reset();
			
			$("#inputRoleno").attr("disabled",false);
			$("#saveBtn").show();
			$("#updateBtn").hide();
			
			
			initZTree();
		}
		
		edit = function(id){
			$.ajax({
				url:"edit",
				type:"post",
				dataType:"json",
				data:{"id":id},
				success:function(data){
					if(data){
						$("#inputRoleno").val(data.roleno);
						$("#inputRolename").val(data.rolename);
						$("#id").val(data.id);
						$("#inputRoleno").attr("disabled",true);
						$("#saveBtn").hide();
						$("#updateBtn").show();
						
						$("#roleModal").modal("show");
						
						initZTree(data.roleno);
						
						//var ownRoleAuthority = getRoleAuthorityByRoleno(data.roleno);
						
					}
				}
			});
		}
		
		deleteRec = function(id){
		
			if(!confirm("确认删除该记录？")){
				return false;
			}
		
			$.ajax({
				url:"delete",
				type:"post",
				dataType:"json",
				data:{
					"id":id
				},	
				success:function(data){
					if(data){
						alert("删除成功");
					}else{
						alert("删除失败");
					}
					$("#table").bootstrapTable("refresh");
				}			
			});
		}
		
		save = function(){
			
			if(isExist()){
				alert("该角色已经存在！");
				return;
			}
			
			var authorityTree = $.fn.zTree.getZTreeObj("authorityTree");
			
			var checkedNodes = authorityTree.getCheckedNodes(true);
			
			var checkedAuthArr = [];
			
			$.each(checkedNodes,function(i){
				checkedAuthArr[i] = this.authorityNo;
			});
			
			$.ajax({
				url:"save",
				type:"post",
				dataType:"json",
				traditional: true,
				data:{
					"roleno":$("#inputRoleno").val(),"rolename":$("#inputRolename").val(),
					"checkedAuthArr":checkedAuthArr
				},
				success:function(data){
					if(data){
						alert("保存成功");
					}else{
						alert("保存失败");
					}
					$('#table').bootstrapTable("refresh");
					$("#roleModal").modal("hide");
				}			
			});
		}
		
		isExist = function(){
			var exist = false;
			$.ajax({
				url:"isExist",
				dataType:"json",
				type:"post",
				async:false,
				data:{
					"roleno":$("#inputRoleno").val()
				},
				success:function(data){
					if(data){
						exist = true;
					}
				}
				
			});
			return exist;
		}
		
		update = function(){
		
			var authorityTree = $.fn.zTree.getZTreeObj("authorityTree");
			
			var checkedNodes = authorityTree.getCheckedNodes(true);
			
			var checkedAuthArr = [];
			
			$.each(checkedNodes,function(i){
				checkedAuthArr[i] = this.authorityNo;
			});
			
			$.ajax({
				url:"update",
				type:"post",
				traditional: true,
				dataType:"json",
				data:{
					"rolename":$("#inputRolename").val(),
					"id":$("#id").val(),
					"roleno":$("#inputRoleno").val(),
					"checkedAuthArr":checkedAuthArr
				},
				success:function(data){
					if(data){
						alert("更新成功");
					}else{
						alert("更新失败");
					}
					$('#table').bootstrapTable("refresh");
					$("#roleModal").modal("hide");
				}
				
			});
		}
		
		
		function filter(treeId, parentNode, childNodes) {
			if (!childNodes) return null;
			for (var i=0, l=childNodes.length; i<l; i++) {
				childNodes[i].name = childNodes[i].name.replace(/\.n/g, '.');
			}
			return childNodes;
		}
		
		initZTree = function(roleno){
			$.ajax({
				url:"../authority/getAuthorityTreeJson",
				type:"post",
				dataType:"json",
				data:{"roleno":roleno},
				success:function(data){
					if(data){
						zNodes = data;
						$.fn.zTree.init($("#authorityTree"), setting, zNodes);
					}
				}
			});
		}
		
		getRoleAuthorityByRoleno = function(roleno){
			var ownRoleAuthority;
			$.ajax({
				url:"getRoleAuthorityByRoleno",
				async:false,
				type:"post",
				dataType:"json",
				data:{"roleno":roleno},
				success:function(data){
					if(data){
						ownRoleAuthority = data;
					}
				}
			});
			return ownRoleAuthority;
		}
		
		search = function(){
			$('#table').bootstrapTable("refresh",{
				query:{field:$.trim($("#field").val()),fieldVal:$.trim($("#fieldVal").val())}
			});
		}
	});//--
	
</script>

</head>
<body>
	<div id="wrapper" class="container-fluid">
		<%@ include file="../../../inc/menu.jsp"%>
		<div id="page-wrapper">
			<div class="container-fluid" style="height: 100%">
				
				<form class="form-inline">
					<a class="btn btn-default" id="add" onclick="add();">添加角色</a>
					<div class="form-group" style="padding-top:5px;">
				    <label for="fieldVal">
				    	<select class="form-control" id="field">
				    		<option value="">所有</option>
				    		<option value="roleno">角色代码</option>
				    		<option value="rolename">角色名称</option>
				    	</select>
				    </label>
				    <div class="input-group" style="m">
				    	<input type="text" class="form-control" id="fieldVal">
				  	<span class="input-group-addon btn btn-primary" onclick="search();">搜索</span>
				    </div>
				  </div>
				</form>
				
				
				<table id="table" class="table"></table>
			</div>
			<!-- /.container-fluid -->
		</div>
	</div>
	
	<!-- Modal -->
		<div class="modal fade" id="roleModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
		  <div class="modal-dialog" role="document">
		    <div class="modal-content">
		      <div class="modal-header">
		        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
		        <h4 class="modal-title" id="myModalLabel">角色管理</h4>
		      </div>
		      <div class="modal-body">
		        <form class="form-horizontal" id="roleForm">
		        <input type="hidden" id="id" />
				  <div class="form-group">
				    <label for="inputRoleno" class="col-sm-2 control-label">角色代码</label>
				    <div class="col-sm-10">
				      <input type="input" class="form-control" id="inputRoleno" name="roleno" placeholder="角色代码">
				    </div>
				  </div>
				  <div class="form-group">
				    <label for="inputRolename" class="col-sm-2 control-label">角色名称</label>
				    <div class="col-sm-10">
				      <input type="name" class="form-control" id="inputRolename" placeholder="角色名称">
				    </div>
				  </div>
				  <div class="form-group">
				    <div class="zTreeDemoBackground left" style="margin-left:20%">
				        <ul id="authorityTree" class="ztree"></ul>
				    </div>
				  </div>
				  
				</form>
		      </div>
		      <div class="modal-footer">
		        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
		        <button type="button" class="btn btn-primary" id="saveBtn" onclick="save();">保存</button>
		        <button type="button" class="btn btn-primary" id="updateBtn" style="display: none;" onclick="update();">更新</button>
		      </div>
		    </div>
		  </div>
		</div>
		
		
</body>

</html>